<template>
  <div class="cart-item">
    <dl class="info">
      <dt>{{item.name}}</dt>
      <dd class="price"><i>&yen;</i>{{item.price}}</dd>
    </dl>

    <count v-model="item.count"></count>
  </div>
</template>

<script>
import Count from 'components/common/Count'

export default {
  name: 'CartItem',

  components: {
    Count
  },

  props: {
    item: {
      type: Object,
      default() {
        return {
          id: 0,
          name: 'FOOD NAME',
          image: '',
          price: '0.00',
          count: 0
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.cart-item {
  display: flex;
  padding: 15px 0;

  .info {
    flex: 1;
    margin: 0;

    dt, dd {
      display: block;
      float: left;
      height: 16px;
      margin: 10px 0;
      text-overflow: ellipsis;
      overflow: hidden;
      line-height: 16px;
    }

    dt {
      width: 75%;
      margin-right: 1em;
    }

    .price {
      font-size: 14px;
      color: #ff3366;

      i {
        font-style: normal;
        font-size: 0.5em;
      }
    }
  }

  .count {
    flex: 0 0 110px;
    width: 110px;
    text-align: right;
  }
}
</style>
